
import Button from '../../components/button/button';
import { useAppSelector } from '../../store/hooks';
import styles from './cart.module.scss';

export const Cart = () => {
	const {balls} = useAppSelector(state => state.cart);
	console.log('мячи из корзины', balls);
	return (
		<div className={styles.container}>
			{balls.length === 0 ? <p>Корзина пуста</p> 
				: 
				<>
					<div className={styles.ballsInCart}>
						<div className={styles.item}>
							<div className={styles.img_name}>
								<p className={styles.name}>{balls[0].name}</p>
								<img src={balls[0].image} width={150} height={150}/>
							</div>
							<div className={styles.price_count}>
								<p>Стоимость: {balls[0].price} р.</p>
								<p>Количество:</p>
								<div className={styles.count}>
									<button className={styles.increment}>+</button>
									<p> {balls[0].count}</p>
									<button className={styles.decrement}>-</button>
								</div>
							</div>
							<Button>Удалить</Button>
						</div>
					</div>
					<div className={styles.total}>Блок стоимости общей цены</div>
				</>
			}
			
			
		</div>
	);
};